<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>课程管理</title>
<link rel="stylesheet" href="../webjars/bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="../webjars/bootstrap/3.3.7/css/bootstrap-theme.css">
<link rel="stylesheet" href="../webjars/bootstrapvalidator/0.5.3/css/bootstrapValidator.css">
<link rel="stylesheet" href="../webjars/bootstrap-table/1.16.0/bootstrap-table.css">
<script type="text/javascript" src="../webjars/jquery/3.5.1/dist/jquery.min.js"></script>
<script type="text/javascript" src="../webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
<script type="text/javascript" src="../webjars/bootstrap-table/1.16.0/bootstrap-table.js"></script>
<script type="text/javascript" src="../webjars/bootstrap-table/1.16.0/locale/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript" src="../webjars/bootbox/5.4.0/bootbox.all.js"></script>
<script type="text/javascript" src="../webjars/bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="../webjars/bootstrapvalidator/0.5.3/js/language/zh_CN.js"></script>
<script type="text/javascript" src="../static/custom/custom.js"></script>
</head>
<body>
	<div class="container">
		<!-- 查询对话框 -->
		
		 
		
		<!-- 表格，表头里定义了表要显示的字段，data-formatter 里只能跟一个方法名 -->
		<table id="mytable">
			<thead>
				<tr>
					<th data-checkbox="true"></th>
					<th data-field="id">编号</th>
					<th data-field="name">课程名称</th>
					<th data-field="classHour">课时数</th>
				</tr>
			</thead>
		</table>
		 <!-- 工具栏 -->

		<div class="btn-group" id="toolbar">
			<button onclick="addClick()" type="button" class="btn btn-secondary">
				<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
			</button>
			<button onclick="editClick()" type="button" class="btn btn-default">
				<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
			</button>
			<button onclick="deleteClick()" type="button" class="btn btn-default">
				<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
			</button>
			<button onclick="search()" type="button"	class="btn btn-default">
				<span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
			</button>
		</div>

	</div>
	<script type="text/javascript">
		function queryParams(param){
			var obj=$('body').find('div#search').find('form').serializeObject();
			obj.limit=param.limit;
			obj.offset=param.offset;
			obj.search=param.search;
			return obj;
		}
		
		function deleteClick(){
			var self=$('#mytable');
			var selected=self.bootstrapTable('getSelections');
			if(!selected.length){
				bootbox.alert('请选择一行再进行此操作');
				return;
			}
			bootbox.confirm({
			    message:'是否删除这条数据！',
			    callback:function (value){
			        if(value){
			        	 $.post('delete', {id:selected[0].id}, function(result){
			        		 if(result.success){
			        			 $('#mytable').bootstrapTable('refresh');
								}else{
									bootbox.alert(result.msg);
								}
			        	 })
			        }
			    },
			    buttons:{
			        confirm:{
			            confirm:'确认',
			            className:'btn-primary'
			        },
			        cancel:{
			            confirm:'取消',
			            className:'btn-default'
			        }
			    }
			})


			
		}
		
		function search(){
			var dialog=$('#searchForm').find('div[role="dialog"]');
			dialog.modal();
		}
		
		function query(){
			$('#mytable').bootstrapTable('selectPage',1);
		}
		
		function clearQuery(){
			$('#searchForm').form('clear');
			$('#mytable').bootstrapTable('selectPage',1);
		}
		
		function addClick(){
	    	var self=$('#mytable');
	    	var dialog = $('<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"></div>');
	        dialog.load('edit', $('#searchForm').form('getParams'), function () {
		        $("body").append(dialog);
		        dialog.modal().on('hidden.bs.modal', function () {
		            dialog.remove();
		            self.bootstrapTable('refresh');
		        });
	        });
		}
		
		function editClick(){
			var self=$('#mytable');
			var selected=self.bootstrapTable('getSelections');
			if(!selected.length){
				bootbox.alert('请选择一行再进行此操作');
				return;
			}
	    	var dialog = $('<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"></div>');
	        dialog.load('edit', {id:selected[0].id}, function () {
		        $("body").append(dialog);
		        dialog.modal().on('hidden.bs.modal', function () {
		            dialog.remove();
		            self.bootstrapTable('refresh');
		        });
	        });
			
		}
		
		$(function(){
			var table=$('#mytable');
			table.bootstrapTable({
				url:'page',
				toolbar: '#toolbar',                //工具按钮用哪个容器
				//queryParams: function (param) {
				//	return { limit: param.limit, offset: param.offset,search:param.search };
				//},//传递参数（*）
				queryParams:queryParams,
				idField: 'id',
				pagination: true,                   //是否显示分页（*）
				sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
				pageNumber: 1,                      //初始化加载第一页，默认第一页
				pageSize: 5,                       //每页的记录行数（*）
				pageList: [3,5,10,30, 100, 200],        //可供选择的每页的行数（*）
				method: 'get',
				search: true,                       //是否显示表格搜索，
				//striped:true,
				singleSelect:true,					//是否单选
				strictSearch: true,
				showColumns: true,                  //是否显示所有的列
				cache:false,
				showRefresh: true,                  //是否显示刷新按钮
				minimumCountColumns: 2,             //最少允许的列数
				clickToSelect: true,                //是否启用点击选中行
				showToggle: true,
				editUrl:'edit',
				deleteUrl:'delete',
				searchUrl:'search',
				saveUrl:'save'

			})
			$('#toolbar').append($.fn.datagrid.toolbar.buttons.add);
			$('#toolbar').append($.fn.datagrid.toolbar.buttons.edit);
			$('#toolbar').append($.fn.datagrid.toolbar.buttons.remove);
			$('#toolbar').append($.fn.datagrid.toolbar.buttons.search);
		})
		
	</script>
</body>
</html>